<template>
  <div class="product-list">
    <a-card style="margin-bottom: 10px">
      <div class="card-context">
        <div>
          <SearchOutlined /> <span style="margin-left: 10px">筛选搜索</span>
        </div>
        <div>
          <a-button style="margin-right: 20px">重置</a-button
          ><a-button type="primary">查询结果</a-button>
        </div>
      </div>
      <div style="padding: 20px">
        <a-form layout="inline">
          <a-form-item label="药品名称">
            <a-input placeholder="请输入药品名" />
          </a-form-item>
          <a-form-item label="药品货号">
            <a-input placeholder="请输入货号" />
          </a-form-item>
          <a-form-item label="药品分类">
            <a-cascader
              v-model:value="value"
              :options="options"
              placeholder="请选择药品分类"
              :fieldNames="fieldNames"
            />
          </a-form-item>
          <a-form-item label="上架状态">
            <a-select style="width: 175px" placeholder="请选择上架状态">
              <a-select-option value="1"> 上架 </a-select-option>
              <a-select-option value="1"> 下架 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="促销状态">
            <a-select style="width: 175px" placeholder="请选择促销状态">
              <a-select-option value="1"> 促销中 </a-select-option>
              <a-select-option value="1"> 未促销 </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
        <div><a-button type="primary" @click="goto()">添加</a-button></div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      rowKey="proId"
      style="margin-top: 10px"
    >
      <template #proIcon="{ record }">
        <a-image :width="72" :src="record.proIcon" />
      </template>
      <template #price="{ record }">
        <p>{{ "进价:￥" + record.proCost }}</p>
        <p>{{ "售价:￥" + record.proPrice }}</p>
        <p>{{ "货号:" + record.proId }}</p>
      </template>
      <template #tags="{ record }">
        <div >
          <span>上架: </span>
          <a-switch v-model:checked="record.isShow" @change="show(record)" />
        </div>
        <div style="margin-top:5px">
          <a-button type="primary" size="small" @click="dis(record)">降价</a-button> 
        </div>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="primary" size="small" @click="editInfo(record)"
            >修改</a-button
          >
          <a-button type="danger" size="small"> 删除 </a-button>
        </a-space>
      </template>
      <template #expandedRowRender="{ record }">
        <a-row :gutter="[16, 24]">
          <a-col :span="6">药品品类:</a-col>
          <a-col :span="6">{{ record.proClass }}</a-col>
          <a-col :span="6">药品标题:</a-col>
          <a-col :span="6">{{ record.proTitle }}</a-col>
        </a-row>
        <a-row :gutter="[16, 24]">
          <a-col :span="6"></a-col>
          <a-col :span="6"></a-col>
          <a-col :span="6">药品标题:</a-col>
          <a-col :span="6">{{ record.proSubtitle }}</a-col>
        </a-row>
      </template>
    </a-table>
      <a-modal
    title="修改打折信息"
    v-model:visible="visibleDis"
    @ok="subDis"
  >
    <a-form
      :model="disForm"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      ref="disForm"
    >
    <a-form-item label="是否降价">
          <a-switch v-model:checked="disForm.isDis" />
      </a-form-item>
      <a-form-item label="降价金额">
        <a-input-number
          id="inputNumber"
          v-model:value="disForm.dis"
          :min="1"
          :max="disForm.maxPrice - disForm.proCost"
        />
      </a-form-item>
      <a-form-item label="当前利润">
        <a-statistic
          :precision="2"
          :value="(disForm.maxPrice - disForm.dis - disForm.proCost).toFixed(2)"
          suffix="元"
        />
      </a-form-item>
    </a-form>
  </a-modal>
  </div>

</template>
<script>
const columns = [
  {
    title: "编号",
    dataIndex: "proId",
    align: "center",
    slots: { customRender: "proId" },
  },
  {
    title: "图片",
    key: "proIcon",
    align: "center",
    slots: { customRender: "proIcon" },
  },
  {
    title: "药品名",
    dataIndex: "proName",
    key: "proName",
    align: "center",
  },
  {
    title: "价格/货号",
    key: "price",
    align: "center",
    slots: { customRender: "price" },
  },
  {
    title: "标签",
    key: "tags",
    align: "center",
    slots: { customRender: "tags" },
  },

  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];

import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    return {
      data,
      columns,
      value: [],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      visibleDis: false, //修改打折信息模态框
      fieldNames: {
        label: "className",
        value: "classId",
        children: "children",
      },
      disForm: {
        proCost: "",
        productId: "",
        dis: "",
        isDis:'',
        maxPrice: "",
      },
      options: [],
    };
  },
  mounted() {
  
    this.getData();
  },
  methods: {

    getData() {

  this.$axios.get("admin/classification/all").then((res) => {
      this.options = res.data.data;
    });

      this.$axios.get("/admin/product/storeAll").then((res) => {
        this.data = res.data.data;
      });
    },
    editInfo(proInfo) {
      this.$router.push({
        name: "ProductAdd",
        params: {
          proInfo: JSON.stringify(proInfo),
        },
      });
    },
    show(pro) {
      this.$axios
        .get("/admin/product/show?productId=" + pro.proId)
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
          } else {
            pro.show = !pro.show;
            message.success("修改失败");
          }
        });
    },
    dis(pro) {
      this.disForm.proCost = pro.proCost;
      this.disForm.productId = pro.proId;
      this.disForm.dis = pro.proDis;
      this.disForm.maxPrice = pro.proPrice;
      this.visibleDis = true;
      this.disForm.isDis=pro.isDiscount
    },
    subDis() {
      console.log();
      this.visibleDis = false;
      this.$axios
        .get(
          "/admin/product/disCount?productId=" +
            this.disForm.productId +
            "&dis=" +
            this.disForm.dis+"&isDis="+this.disForm.isDis
        )
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
              this.$axios.get("/admin/product/storeAll").then((res) => {
        this.data = res.data.data;
      });
          } else {
            message.success("修改失败");
          }
        });
    },
    goto() {
      this.$router.push({
        name: "ProductAdd",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.product-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>